<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
${aier_doctype}
<html <s:property value="aier-html-xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<title>${aier_title}</title>
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/jq.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/multiselect.css" />
<link rel="stylesheet" href="${aier_css_url}jc/chosen.css">
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/reset.css" />
<link rel="stylesheet" href="${aier_css_url}social/user/relationship/myfollow.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/homeside.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/emotion.css" />
<!-- relation -->
<link rel="stylesheet" href="${aier_css_url}social/user/relationship/relationship.css">
<link rel="stylesheet" href="${aier_css_url}social/module/xxs.css" />

<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}ui.js"></script>
<script type="text/javascript" src="${aier_js_url}97/WdatePicker.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/ja.js"></script>
<script type="text/javascript" src="${aier_js_url}jc/cj.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/multiselect.js"></script>
<script src="${aier_js_url}trantime/jquery-aier.js"></script>

</head>
<body>

	<!-- 顶栏 -->
	<s:action name="userhomecomm_homeHead" namespace="/user" executeResult="true"></s:action>
	<!-- 顶栏结束 -->
	
	

	<div class="window-content">

		<!-- wrap  -->
		<div class="wrap wrap-homepage wrap-relationship clearfix">

			<!-- 主侧栏 -->
			<div class="home-side">

				<!-- 分组1  关注组 -->
				<div class="group-myfollow">

					<fieldset class="title-fieldset">
						<legend>关系中心</legend>
					</fieldset>
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/usermyfollow.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>关注</span>
						</a>
					</div>
					<div class="tab-small">
						<a class="btn" href="${aier_url}user/usermyfollow.shtml">
							全部关注（<span id = "allfollow">300</span>）
						</a>
					</div>
					<div id = "group"></div>

					<!-- 创建分组 -->
					<div class="create-group">
						<a class="btn btn-normal-orange" id="createGroup">
							<span>创建分组</span>
						</a>

					</div>
				</div>
				<!--  -->

				<!-- 分组2  密友圈组-->
				<div class="group-mycf">
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/userchumscircle.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>密友圈</span>
						</a>
					</div>
				</div> 
				<!--  -->				

				<!-- 分组3  粉丝组 -->
				<div class="group-myfans">
					<div class="tab-normal current">
						<a class="btn" href="${aier_url}user/usermyfans.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>粉丝</span>
						</a>
					</div>
				</div>
				<!--  -->	

				<!-- 分组4  找人 -->
				<div class="group-find">
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/lookup_findPeople.shtml">
							<em class="icon-1 icon-1-zhaoren"></em>
							<span>找人</span>
						</a>
					</div>
				</div>
				<!--  -->	
				
			</div>
			<!-- 左侧栏结束 -->


			<!-- 主区域 (右  -->
			<div class="main-area">
				<div class="myfans-content">
					<div class="myfans-topbar">
						<div class="title">
							<span class="title-a">已有<em id = "cfans">300</em>人关注你</span>
							<span class="title-b">没有尚未处理的请求</span>
						</div>
					</div>
					<div class="myfans-navbar">
						<ul class="float-list clearfix">
							<li class="nav-li">
								<a href="" class="nav-item">全部
									<em class="select-arrow">
										<em class="down">◆</em> 
									</em>
								</a>
								<ul class="hover-list" style="display:none">
									<li><a class="btn-group" href="javascript:void(0);" data-sortname="0">全部</a></li>
									<li><a class="btn-group" href="javascript:void(0);" data-sortname="2">互相关注</a></li>
									<li><a class="btn-group" href="javascript:void(0);" data-sortname="1">我未关注</a></li>
								</ul>
							</li>
							<li class="nav-li">
								<a href="" class="nav-item">按关注时间排序
									<em class="select-arrow">
										<em class="up">◆</em>
									</em>
								</a>
								<ul class="hover-list" style="display:none">
									<li><a class="btn-sort" href="javascript:void(0);" data-sortname="cdate">按关注时间排序</a></li>
									<li><a class="btn-sort" href="javascript:void(0);" data-sortname="cfans">按粉丝数排序</a></li>
								</ul>
							</li>
						</ul>


					</div>
					<div class="myfans-list" id = "myfans">
				

					</div>
					<div id = "page"></div>
				</div>
				<!-- myfans func over -->
			</div>
			<!-- 主区域结束 -->
            <div id="deleteConfirm" style="display: none;" title="删除">
                <p>确认要移除粉丝吗?</p>
            </div>



		</div>
		<!--  wrap end -->
		<!-- footer copyright -->
		<s:action name="userhomecomm_homeFooter" namespace="/user" executeResult="true"></s:action>
		<!-- /footer copyright -->
	</div>
	<!-- win content end -->
	

	<!-- 创建分组 -->
	<div id="createGroupDialog" title="创建分组" style="display:none;">

	    <div>
	        <label for="createGroup">创建分组</label>
	        <input type="text" id="groupName">
	    </div>
	
	</div>
	<!-- 私信 -->
	<div class="dialog dialog-myfans-letter" id="letterDialog" title="私信" style="display:none;">
	    <div>
	        <div class="letter-content">
	            <textarea id="letterTextarea"></textarea>
	        </div>
	        <div class="clearfix">
	            <a class="btn-emotion"><i class="icon-1 icon-1-emotion" style="width:22px;height:22px;"></i></a>
	        </div>
	    </div>
    </div>
    
    <div id="dialogFollowPeople" title="关注成功！设置备注名吗?" style="display:none;">
        <div class="bz-bar">
            <label>
                <span >设置备注名</span>
                <input type="text" id = "remark">
            </label>
        </div>
        
        <div class="gp-bar">
            <div class="exist" id = "groupRadio">
                
            </div>
            <div class="new">
                <a class="btn-addnew">新增一个分组</a>
                <div class="addnew-bar" style="display:none;">
                    <label>
                        <input type="text">
                    </label>
                    <a class="btn-orange-2 btn-confirm-add" id = "confirm">确定</a>
                    <a class="btn-confirm-cancel" id = "cancel">取消</a>
                </div>
            </div>
        </div>
    
    </div>


</div>
</body>

<script type="text/javascript">
    var sort = "cdate";
    var group = 0;
    var page = 1;       // 当前页
    var page_size = 20; // 每页的记录数
    
    //  插入表情
	$('.btn-emotion').click(function(){
		$(this).sinaEmotion({
		    target: $('#letterTextarea')
		});
	});

    // 排序
    $('.btn-sort').click(function(){
        var sortname = $(this).attr('data-sortname');
        sort = sortname;
        searchFans(page);
    });
    
    // 分组
    $('.btn-group').click(function(){
        var sortname = $(this).attr('data-sortname');
        group = sortname;
        searchFans(page);
    });

	$(document).ready(function() {
		$('.msg-date').each(function(){
			$(this).html(tranTime($(this).attr('data-stamp')));
		});
	});

// 转换时间
$(document).ready(function(){
	$('.msg-date').each(function(){
		$(this).text(tranTime($(this).attr('data-stamp')));
	});
});


// 预览图和完整图切换
$('.zoom-out').click(function(){
	$(this).parents('.xxs-extend').css('display','none')
	.prev('.xxs-media-pre').css('display','block');
});
$('.zoom-in').click(function(){
	$(this).parents('.xxs-media-pre').css('display','none')
	.next('.xxs-extend').css('display','block');
});


$(window).bind('scroll', function(){
	var a = $(this).scrollTop(),
		b = $(this).outerHeight();
	if ( a > 100 ) {
		$('#btt').css({'display':'block','top':a+b-200});
	} else {
		$('#btt').css('display','none');
	}
});


$('#btt').click(function(){
	$('#changesrc').attr('src', '../images/upload/userCenter/12.jpg');
});

function selectFollow() {
	if ($(this).hasClass('selected')) {
		$(this).removeClass('selected');
	} else {
		$(this).addClass('selected');
	}
}

$('.list-item').click(selectFollow);


$('.nav-item,.hover-list').mouseover(function(){
	$(this).parent('li').children('.hover-list').show();
	$(this).parent('li').find('em>em').removeClass('up').addClass('down');
});
$('.nav-item,.hover-list').mouseout(function(){
	$(this).parent('li').children('.hover-list').hide();
	$(this).parent('li').find('em>em').removeClass('down').addClass('up');
});

    $(document).ready(function(){
        searchFans(page);
        searchFollowGroup();
    });
    // 获取分组列表以及每个分组的人数
    function searchFollowGroup() {
        var fun=function(data){
               if(data.s==1){
                   $("#allfollow").text(data.followCount);
                   var html = "";
                   var gr = "";
                   fgList = data.fgList;
                   if (data.fgList != null && data.fgList.length != 0) {
                       for (var i=0;i<data.fgList.length;i++) {
                            var fg = data.fgList[i];
                            html += '<div class="tab-small"><a class="btn" href="${aier_url}${aier_uri}usermyfollow${aier_suffix}?fgid='+fg.fgid+'">'+fg.name+' （<span>'+fg.count+'</span>）</a></div>';
                            if (fg.fgid != -1) {
                                gr += '<input name="group" type="radio" value = "'+fg.fgid+'">'+fg.name+'</input>';
                            }
                       }
                   }
                   
                   $("#group").html(html);
                   $("#groupRadio").html(gr);
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_searchFollowGroup${aier_suffix}"),
                fun,{
                    
           });
    }
    
    // 查询粉丝列表
    function searchFans(nowpage) {
    	page = nowpage;
        var fun=function(data){
            if(data.s==1){
                if (data.userList != null && data.userList.length > 0) {
                    $("#cfans").text(data.userList.length);
                    appendList(data.userList);
                } else {
                    $("#cfans").val(0);
                    $("#myfans").html("");
                }
                // 更新分页显示
                page = data.page;
                toLoadPage(page, page_size, data.page_count, data.count, "page", "searchFans", null, null);  
                if (data.count == 0) {
                    $("#page").css("display","none");
                } else {
                    $("#page").css("display","block");
                }
            } else {
                $().message("删除失败，请稍后再试！"); 
            }
        };
        exeAjax(
             ajaxUrl("${aier_url}${aier_urijs}usermyfans_searchFansList${aier_suffix}"),
             fun,{
                 "page":page,
                 "page_size":page_size,
                 "sort":sort,
                 "state":group
        });
    
    }
    
    function appendList(userList) {
        var html = "";
        for (var i=0;i<userList.length;i++) {
            var fans = userList[i];
            html += '<div class="myfans-item" ><div class="avatar"><a href="${aier_url}user/uccomm_userCenter.shtml?in_uid='+fans.uid+'"><img src="${get_picturl_url}small/'+fans.headimg+'" alt=""></a></div>';
	        html += '<div class="userinfo"><div class="name">'+fans.nickname+'<em class="gender icon-1 icon-1-male"></em>';
	        if (fans.address != null) {
	           html += '<span class="hometown">'+fans.address+'</span>';
	        }
	        
	        html += '</div><div class="number">关注<span>'+fans.cfollow+'</span><em>|</em>粉丝<span>'+fans.cfans+'</span><em>|</em>新鲜事<span>'+fans.cfresh+'</span></div>';
	        if (fans.desinfo != null) {
	           html += '<div class="signature">简介:<span>'+fans.desinfo+'</span></div></div><div class="side">';
	        } else {
	           html += '</div><div class="side">';
	        }
	        
	        if (fans.state == 2) {
	            html += '<a class="btn huguan btn-normal-orange"><span><em class="icon-1 icon-1-huguan"></em>互相关注</span></a>';
	        } else {
	            html += '<a class="btn addguan btn-normal-orange" data-uid = "'+fans.uid+'"><span><em class="icon-1 icon-1-huguan"></em>加关注</span></a>';
	        }
	        
	        html += '<a onclick="sendLetter('+fans.uid+')" class="btn-letter">私信</a><a onclick="removeFans('+fans.uid+','+fans.state+')" class="btn-remove">移除粉丝</a></div></div>';
        
        }
        
        $("#myfans").html(html);
        
        $('.addguan').click(function(){
            var thisBtn = $(this);
            var fuid = thisBtn.attr('data-uid');
            var fun=function(data){
               if(data.s==1){
                   // 修改加关注为相互关注
                   thisBtn.find('span').html('<em class="icon-1 icon-1-huguan"></em>互相关注');
                   // 关注成功，弹出对话框，修改备注和分组
                   btnFollow(fuid);                               
               } else {
                    $().message("加关注失败，请重新再试");
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollow${aier_suffix}"),
                fun,{
                   "fuid":fuid
           });
       });
    }
    
    // 加关注
	function btnFollow(fuid){
	    var followDialog = $('#dialogFollowPeople');//关注成功弹出框
	
	    followDialog.dialog({
	        modal: true,
	        autoOpen : false,
	        show : "fade",
	        hide : "fade",
	        width : "320",
	        height : "240",
	        buttons: {
	            "确定": function() {
	                var fgid;
	                var group = document.getElementsByName("group");
	                for(var i=0;i<group.length;i++)
	                {
	                    if(group[i].checked)
	                       fgid = group[i].value;
	                }
	                var remark = $("#remark").val();
	                if (remark.length > 10) {
	                   $().message("备注名太长！");
	                   return;
	                }
	                if (!isnull(fgid)) {
	                   var fun=function(data){
	                   };
	                   exeAjax(
	                        ajaxUrl("${aier_url}${aier_urijs}usermyfollow_moveFollowGroup${aier_suffix}"),
	                        fun,{
	                            "fuidStr":fuid,
	                            "fgid":fgid
	                   });
	                }
	                if (!isnull(remark)) {
	                   var fun=function(data){
	                   };
	                   exeAjax(
	                        ajaxUrl("${aier_url}${aier_urijs}userchumscircle_updateRemark${aier_suffix}"),
	                        fun,{
	                            "auid":fuid,
	                            "remark":remark
	                   });
	                }
	                $().message("设置成功！");
	                followDialog.dialog( "close" );
	            },"取消": function() {
	                followDialog.dialog( "close" );
	            }
	        }
	    });
	    followDialog.dialog( "open" );  
	}
	
	// 创建分组
	$('#dialogFollowPeople .btn-addnew').click(function(){
	    $(this).hide();
	    inputNewG = $(this).next('.addnew-bar').show();
	    
	});
	
	$("#confirm").click(function(){
	    var newGName = $('.addnew-bar').find('input').val();
	    if(newGName) {
	        var fun=function(data){
	            if (data.s == 1) {
	                searchFollowGroup();
	                $('.btn-addnew').show();
	                $('.addnew-bar').hide();
	                $('.addnew-bar').find('input').val("");
	            } else if (data.s = 10001) {
	                $().message("已存在相同名称分组!");
	            } else {
	                $().message("创建分组失败，请稍后再试!");
	            }
	        };
	        exeAjax(
	             ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollowGroup${aier_suffix}"),
	             fun,{
	                 "name":newGName
	        });
	        
	    } else{
	        $().message('请输入分组名');
	    }
	
	});
	
	$("#cancel").click(function(){
	    $('.btn-addnew').show();
	    $('.addnew-bar').hide();
	    $('.addnew-bar').find('input').val("");
	});
    
    // 移除粉丝
    function removeFans(fuid,state) {
        $(function() {
            $("#deleteConfirm").dialog(
                {
                    //背景变暗
                    modal : true,
                    autoOpen : false,
                    show : "fade",
                    hide : "fade",
                    width : "340",
                    height : "220",
                    buttons : {
                        "确定" : function() {
                            var fun=function(data){
                                $("#deleteConfirm").dialog("close");
					            if(data.s==1){
					                searchFans(page);
					            } else {
					                $().message("移除失败，请稍后再试！");
					            }
					        };
					        exeAjax(
					             ajaxUrl("${aier_url}${aier_urijs}usermyfans_deleteFans${aier_suffix}"),
					             fun,{
					                 "fuid":fuid,
					                 "state":state
					        });
                                            },
                        "取消" : function() {
                            $(this).dialog("close");
                        }
                }
            });
            $("#deleteConfirm").dialog("open");
        });
    }
    // 发送私信
    function sendLetter(uid) {
        // 私信 
	    $('#letterDialog').dialog({
	        //背景变暗
	        modal: true,
	        autoOpen : false,
	        show : "fade",
	           hide : "fade",
	        width : "300",
	        height : "240",
	        buttons: {
	            "确定": function() {
	                var content = $("#letterTextarea").val();
	                if (isnull(content)) {
	                    $().message("请输入私信内容！");
	                    return;
	                }
	                
	                var fun=function(data){
	                       
	                       if(data.s==1){
	                            $().message("发送成功！");
	                            $("#letterTextarea").val("");
	                            $("#letterDialog").dialog("close");
	                       } else {
	                            $().message("发送失败，请稍后再试！");
	                       }
	                   };
	                   exeAjax(
	                        ajaxUrl("${aier_url}${aier_urijs}usermessage_sendLetter${aier_suffix}"),
	                        fun,{
	                            "ruid":uid,
	                            "content":content
	                   });
	                
	            },"取消": function() {
	                $( this ).dialog( "close" );
	                $("#letterTextarea").val("");
	            }
	        }
	    });
	    $('#letterDialog').dialog("open");
        
    }
    
//   新建分组
$('#createGroupDialog').dialog({
    //背景变暗
    modal: true,
    autoOpen : false,
    show : "fade",
       hide : "fade",
    width : "300",
    height : "200",
    buttons: {
        "确定": function() {
            
            var name = $("#groupName").val();
            if (isnull(name)) {
                $().message("请输入分组名！");
                return;
            }
            if (fgList != null && fgList.length > 0) {
                for (var i = 0; i<fgList.length; i++) {
                    if (name == fgList[i].name) {
                        $().message("已存在相同分组！");
                        return;
                    }
                }
            }
            var fun=function(data){
               if(data.s==1){
                   searchFollowGroup();
                   $("#groupName").val("");
                   $('#createGroupDialog').dialog("close");
               } else if(data.s == 10001){
                   $().message("已存在相同分组！");
               } else {
                   $().message("创建失败，请稍后再试！");
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollowGroup${aier_suffix}"),
                fun,{
                    "name":name
           });

        },"取消": function() {
            $( this ).dialog( "close" );
            $("#groupName").val("");
        }
    }
});

$('#createGroup').click(function(){
    $('#createGroupDialog').dialog("open");
});
    

</script>


</html>